<template>
  <view class="wrap">
    <view class="bg">
      <image src="/static/images/login-1.png"></image>
    </view>
    <view class="li-box">
      <view class="li" v-for="(item,index) in liData" :key="index">
        <image :src="item" @click="lookImgFun(index)"></image>
      </view>
    </view>
	
	<view class="li-level" >
	  <view class="li" style="background-color: #0EAD66;" >
	    {{this.levelInfo.level_id_A}}
	  </view>
	  <view class="li"  style="background-color: #00CC70;" >
	    {{this.levelInfo.level_id_B}}
	  </view>
	  <view class="li"  style="background-color: #8DA805;">
	    {{this.levelInfo.level_id_B1}}
	  </view>
	  <view class="li"  style="background-color: #FEC817;">
	    {{this.levelInfo.level_id_C}}
	  </view>
	  <view class="li"  style="background-color: #E75049;">
	    {{this.levelInfo.level_id_D}}
	  </view>
	</view>
	
	<view class="li-level-title" >
	  <view class="li" style="color: #0EAD66;" >
	    {{this.levelInfo.level_title_A}}
	  </view>
	  <view class="li"  style="color: #00CC70;" >
	    {{this.levelInfo.level_title_B}}
	  </view>
	  <view class="li"  style="color: #8DA805;">
	    {{this.levelInfo.level_title_B1}}
	  </view>
	  <view class="li"  style="color: #FEC817;">
	   {{this.levelInfo.level_title_C}}
	  </view>
	  <view class="li"  style="color: #E75049;">
	    {{this.levelInfo.level_title_D}}
	  </view>
	</view>
	
    <view class="btn" v-if="type == 0" @click="AuthorizeMain = true"></view>
    <view class="btn one" v-else></view>
    <u-popup :show="AuthorizeMain" :safeAreaInsetBottom="false" mode="center" bgColor="#ffffff00" @close="AuthorizeMain = false">
      <view class="alter-box-two">
        <view class="title">温馨提示</view>
        <view class="content">剂安安APP将获取您的手机摄像头，扫码，照片上传等权限，进行扫码操作，相关协议请看<text @click="$u.route('/pages/login/privacyPact?type=1')">《用户协议》</text>、<text @click="$u.route('/pages/login/privacyPact?type=2')">《隐私协议》</text></view>
        <view class="btn-a">
          <view class="left" @click="AuthorizeMainFun(1)">我同意</view>
          <view class="right" @click="AuthorizeMainFun(0)">不同意,暂不登录</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
	getGoodsGrade
} from '@/api/api.js';
export default {
  data() {
    return {
      content: '',
      isPick: false,
      liData: [
        'https://app.jichacha.vip/upload/03/7ef24c7d41df468da40c879e351bea.png',
        'https://app.jichacha.vip/upload/e3/3c6ec1d6f952f0b652404d9eb44a0c.png',
        'https://app.jichacha.vip/upload/ac/536db06a5271cd0da23951826e5470.png'
      ],
      AuthorizeMain: false,
      submitShow: false,
      type: 0,
	  levelInfo:{}
    };
  },
  onLoad(opition) {
    if (opition.type) {
      this.type = opition.type;
    }
	// 商品等级信息
	getGoodsGrade().then((res) => {
		this.levelInfo = res.data;
	});
  },
  methods: {
    toHomeFun() {
      const that = this;
      uni.reLaunch({
        url: '/pages/tabbar/index'
      })
	  
	},
    requestAndroidPermission(permissionID) {
      return new Promise((resolve, reject) => {
        plus.android.requestPermissions(
          [permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
          function (resultObj) {
            let result = 1;
            for (var i = 0; i < resultObj.granted.length; i++) {
              var grantedPermission = resultObj.granted[i];
              result = 1
              console.log('已获取的权限：' + result);
            }
            for (var i = 0; i < resultObj.deniedPresent.length; i++) {
              var deniedPresentPermission = resultObj.deniedPresent[i];
              result = 0
              console.log('拒绝本次申请的权限：' + result);
            }
            for (var i = 0; i < resultObj.deniedAlways.length; i++) {
              var deniedAlwaysPermission = resultObj.deniedAlways[i];
              result = -1
              console.log('永久拒绝申请的权限：' + result);
            }
            resolve(result);
            // 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
          },
          function (error) {
            console.log('申请权限错误：' + error.code + " = " + error.message);
            resolve({
              code: error.code,
              message: error.message
            });
          }
        );
      });
    },
    AuthorizeMainFun(value) {
      const that = this;
      if (value == 1) {
        // #ifdef APP-PLUS
        that.requestAndroidPermission('android.permission.CAMERA').then((res) => {
          console.log(res, 'res')
          if (res == -1 || res == 0) {
            uni.setStorageSync('codeMainValue', false)
            uni.setStorageSync('Authorize', false);
            that.AuthorizeMain = false;
            uni.$u.toast('请同意APP调用您的摄像头权限!');
          } else {

            uni.setStorageSync('codeMainValue', true);
            uni.setStorageSync('scanCode', true);
            uni.setStorageSync('Authorize', true);
            that.toHomeFun();
            // that.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE').then((resOne)=>{
            // 	if(resOne == -1 || resOne == 0){
            // 		uni.setStorageSync('scanCode',false);
            // 		uni.setStorageSync('Authorize', false);
            // 		that.AuthorizeMain = false;
            // 		uni.$u.toast('请同意APP调用您的相册权限!');
            // 	}else{
            // 		uni.setStorageSync('scanCode',true);
            // 		uni.setStorageSync('Authorize', true);
            // 		that.toHomeFun();
            // 	}
            // })
          }
        })
        // #endif
        // #ifndef APP-PLUS
        uni.setStorageSync('Authorize', true);
        that.toHomeFun();
        // #endif

      } else {
        uni.setStorageSync("token", '')
        this.$store.commit('LOGOUT');
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
      this.AuthorizeMain = false;
    },
    lookImgFun(index) {
      // 节前过审暂时隐藏
      // uni.previewImage({
      //   urls: this.liData,
      //   current: index
      // })
    }
  }
}
</script>

<style lang="scss">
.wrap {
  box-sizing: border-box;
  width: 750rpx;
  overflow: hidden;

  .bg {
    width: 750rpx;
    height: 1624rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    image {
      width: 100%;
      height: 100%;
      display: inline-block;
      vertical-align: top;
    }
  }

  .li-box {
    width: 100%;
    position: absolute;
    left: 72rpx;
    top: 460rpx;
    z-index: 2;

    .li {
      width: 170rpx;
      height: 360rpx;
      display: inline-block;
      vertical-align: top;
      margin: 0 48rpx 0 0;
      border-radius: 24rpx;
      overflow: hidden;
      border: solid 1rpx #303030;
      box-sizing: border-box;

      image {
        width: 100%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
      }
    }
  }
  
  .li-level{
	    position: absolute;
	    left: 5%;
	    top: 1010rpx;
	    z-index: 2;
	  
	    .li {
	      width: 60rpx;
		  height: 60rpx;
	      display: inline-block;
	      vertical-align: top;
	      margin: 0 39rpx;
	      border-radius: 50%;
	      overflow: hidden;
	      // border: solid 1rpx #303030;
	      box-sizing: border-box;
		  text-align: center;
		  line-height: 60rpx;;
		  font-size: 32rpx;
		  font-weight: 500;
		  color: #fff;
	    }
	}
	.li-level-title{
		    position: absolute;
		    left: 5%;
		    top: 1070rpx;
		    z-index: 2;
		    .li {
		      width: 120rpx;
			  height: 60rpx;
		      display: inline-block;
		      vertical-align: top;
		      margin: 0 9rpx;
		      // border-radius: 50%;
		      overflow: hidden;
		      // border: solid 1rpx #303030;
		      // box-sizing: border-box;
			  text-align: center;
			  line-height: 60rpx;;
			  font-size: 24rpx;
			  font-weight: 500;
			  
		    }
		
		}

  .btn {
    width: 664rpx;
    height: 140rpx;
    border-radius: 70rpx;
    position: absolute;
    z-index: 2;
    left: calc(50% - 330rpx);
    top: 1194rpx;
    // background-color: red;
  }

  .btn.one {
    background-color: #4e6ff3;
  }
}

.alter-box-two {
  width: 560rpx;
  border-radius: 20rpx;
  background-color: white;
  padding: 30rpx 30rpx 50rpx 30rpx;
  font-size: 30rpx;
  line-height: 50rpx;
  color: #303030;

  .title {
    font-size: 40rpx;
    font-weight: 700;
    text-align: center;
  }

  .content {
    padding: 40rpx 0;
    line-height: 56rpx;

    text {
      color: #2767e6;
    }
  }

  .btn-a {
    width: 100%;
    text-align: left;
    overflow: hidden;
    font-size: 26rpx;
    color: white;
    line-height: 80rpx;

    .left {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      border-radius: 40rpx;
      text-align: center;
      background-color: #2767e6;
    }

    .right {
      width: 100%;
      display: inline-block;
      vertical-align: top;
      border-radius: 40rpx;
      text-align: center;
      background-color: #999999;
      margin-top: 20rpx;
    }
  }
}
</style>